<template>
  <div class="test">
    <h2
      id="h2"
      ref="h2Ref"
    >
      test
    </h2>
    <button @click="handleClick">handleClick</button>
    <child ref="childRef"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  data() {
    return {
      msg: '父组件中定义的数据'
    }
  },
  // 只会触发一次
  created() {
    // console.log('created---' + document.querySelector('#h2'))
    // 实时监听DOM元素的挂载情况，当所有的DOM元素全部挂载完毕之后才触发，而且可以多次触发
    this.$nextTick(() => {
      console.log('created---' + this.$refs.h2Ref)
    })
  },
  // 只会触发一次
  mounted() {
    console.log('mounted dom---' + document.querySelector('#h2'))
    console.log('mounted refs---' + this.$refs.h2Ref)
  },
  methods: {
    handleClick() {
      this.msg = '更新了'
      // console.log(this.$refs)
      // console.log(this.$refs.childRef.son)
      // this.$refs.childRef.show()
      // console.log(this.$refs.h2Ref)
    },
    fn() {
      console.log('父组件中定义的函数')
    }
  },
  components: {
    Child
  }
}
</script>
<style lang="scss" scoped></style>
